<template>
  <div class="marquee">
    <a class="marquee_box">
      <ul class="marquee_list" :class="{slideInUp:animate}">
        <li v-for="(item,index) in list" :key="index">
          <div>
            {{ item.name }} +
            <a href @click.prevent="changeBtn">点击超链接</a>
          </div>
        </li>
      </ul>
    </a>
  </div>
</template>
<script>
export default {
  data() {
    return {
      animate: false,
      list: [
        {
          name: '若非万种飞烟都过眼 '
        },
        {
          name: '怎会迷恋巫山的那一片'
        },
        {
          name: '若非海枯石烂相看两厌'
        },
        {
          name: '怎又会弱水涨桑田'
        },
        {
          name: '以为衔泥归来旧堂前'
        },
        {
          name: '是我似曾相识的那一面'
        },
        {
          name: '以为积雪成川有孤鸿不知疲倦'
        },
        {
          name: '聚似飞霜不肯融'
        },
        {
          name: '散如尘埃各西东'
        },
        {
          name: '痴人说着梦'
        },
        {
          name: '都道情之所钟'
        },
        {
          name: '求不得就偏宠'
        },
        {
          name: '心猿意马就相拥'
        },
        {
          name: '是风动，还是幡动，轮回难道就不同'
        }
      ]
    }
  },
  created() {
    // 页面显示
    setInterval(this.slideInUp, 2000)
  },
  methods: {
    slideInUp() {
      this.animate = true
      setTimeout(() => {
        this.list.push(this.list[0])
        this.list.shift()
        this.animate = false
      }, 1500)
    },
    changeBtn() {
      console.log('object :', '此处是超链接')
    }
  }
}
</script>
<style lang="scss" scoped>
.marquee {
  width: 100%;
  // height: 40px;
  height: 120px;
  align-items: center;
  color: rgb(158, 149, 173);
  background-color: white;
  display: flex;
  box-sizing: border-box;
  overflow: hidden;
}
.marquee_box {
  display: block;
  position: relative;
  width: 60%;
  height: 120px;
  // overflow: hidden;
  background-color: rgb(17, 16, 16);
}

.marquee_list {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.slideInUp {
  transition: all 2s;
  margin-top: -15px;
}

.marquee_list li {
  height: 30px;
  line-height: 30px;
  font-size: 14px;
  padding-left: 20px;
}

.marquee_list li span {
  padding: 0 2px;
}
</style>

